<template>
	<view class="">
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-db">
					<picker @change="cityChange" @cancel="cityCancel" mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray"
					 range-key="name">
						<input v-if="workCity===''" style="border-bottom: none;" placeholder-style="font-size:28upx;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(178,178,178,1);"
						 placeholder="请输入您的工作城市" name="workCity" v-model="workCity" class="person-info-input"></input>
						<view v-if="workCity!==''" style="border-bottom: none;"
						placeholder="请输入您的工作城市" name="workCity" class="person-info-input">
							{{multiArray[0][multiIndex[0]].name}}，{{multiArray[1][multiIndex[1]].name}}
						</view>
					</picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				multiArray: [
					[],
					[]
				],
				multiIndex: [],
				originMultiIndex:[],
			}
		},
		methods: {
			cityCancel(){
				console.log("取消选择",this.originMultiIndex);
				let provinceIndex;
				
				this.multiArray[0].filter((val,index)=>{
					if(val.regionId===this.originMultiIndex[0]-0){
						provinceIndex = index
					}
				})
				console.log(provinceIndex)
				this.multiIndex.splice(0,1,provinceIndex)
				let cityIndex;
				this.multiArray[0][provinceIndex].children.filter((val,index)=>{
					if(val.regionId===this.originMultiIndex[1]-0){
						cityIndex = index
					}
				})
				this.multiArray.splice(1,1,this.multiArray[0][provinceIndex].children);
				this.multiIndex.splice(1,1,cityIndex)
			},
			cityChange(){
				console.log("确认选择");
				console.log(this.multiIndex);
				this.originMultiIndex = [this.multiArray[0][this.multiIndex[0]].regionId,this.multiArray[1][this.multiIndex[1]].regionId]
			},
			bindMultiPickerColumnChange: function(e) {
				console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value);
				if(e.detail.column===0){
					let provinceIndex = e.detail.value;
					console.log(this.multiArray[0][provinceIndex]);
					//获取当前省份id
					let provinceId = this.multiArray[0][provinceIndex].regionId;
					this.multiArray[0].filter((val,index)=>{
						if(val.regionId == provinceId){
							console.log(index);
							this.multiIndex.splice(0,1,index);
							console.log(this.multiIndex);
							return index
						}
					})
					if(this.multiArray[0][provinceIndex].children){
						this.multiArray.splice(1, 1, this.multiArray[0][provinceIndex].children);
					}else{
						this.getCity(provinceId,provinceIndex,false);
					}
					
				}
				this.$forceUpdate()
			},
			//根据省份获取所在市
			getCity(provinceId , provinceIndex , isConfirm){
				// console.log('isConfirm',isConfirm)
				this.$request.get({
					url: 'region/queryCityByProvinceId.json',
					data: {
						provinceId
					},
				}).then(res=>{
					console.log(res);
					this.multiArray[0][provinceIndex].children = res;
					this.multiArray.splice(1, 1, res);
					
					if(this.userInfoData.city){
						res.filter((val,index)=>{
							if(val.regionId == this.userInfoData.city){
								console.log(index);
								// this.multiIndex = this.multiIndex.push(index);
								this.multiIndex.splice(1,1,index);
								console.log("this.multiIndex",this.multiIndex);
								return index
							}
						})
					}
				})
			},
			getAllProvince() {
					this.$request.get({
						url: 'region/queryAllProvinces.json',
						data: {},
					}).then(res => {
						// console.log("省市区", res);
						this.multiArray.splice(0, 1, res);
						this.originMultiIndex=[this.userInfoData.province,this.userInfoData.city];
						//判断用户是否输入省市
						if(this.userInfoData.province){
							let provinceIndex;
							res.filter((val,index)=>{
								if(val.regionId == this.userInfoData.province){
									console.log(index);
									provinceIndex=index;
									this.multiIndex.splice(0,1,index);
									console.log(this.multiIndex);
									return index
								}
							})
							this.getCity(this.userInfoData.province , provinceIndex , true);
						}else{
							this.getCity(res[0].regionId,0,false);
						}
					})
				},
			
			
		},
	}
</script>

<style scoped>

</style>